<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
	    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
        <title>GET JSON - httpx.js Examples</title>
        <link rel="stylesheet" href="css/global.css">
    </head>
    <body>
        <div id="layout">
            <header>
                <h1>GET JSON Examples</h1>
                <a href="index.html" class="btn">Back to index</a>
            </header>
            <pre id="output">Loading ...</pre>
            <pre id="output1">Loading ...</pre>
            <pre id="output2">Loading ...</pre>
            <pre id="output3" class="error">Loading ...</pre>
            <pre id="output4">Loading ...</pre>
        </div>
        <script src="../src/httpx.js"></script>
        <script>
            var $ = function(id) {
                return document.getElementById(id);
            };

            httpx.json("./php/get-json.php?temp="+(new Date).getTime(), {test:123}, function(json) {
                console.log("json =>", json, this);
                $("output").innerText = this.$request.url + "\n\n" + this.responseText;
                console.log(json, this);
            });

            httpx.json("https://jsonplaceholder.typicode.com/posts/42?temp="+(new Date).getTime(), {test:1}, function(json) {
                console.log("cross domain get json =>", json, this);
                $("output1").innerText = this.$request.url + "\n\n" + this.responseText;
                console.log(json, this);
            }, function (error) {
                console.error(error);
            }, {
                sendBefore : function (xhr) {
                    // this == xhr
                    // send before custom xhr fields
                    xhr.timeout = 30000;
                    xhr.withCredentials = true;
                    console.log('send before =>',xhr, this);

                    return this; // or return xhr;
                }
            });

            httpx.getJSON({
                url : "./php/get-json.php?temp="+(new Date).getTime(),
                data : {test : 123, id : 4556656, title : "Title 中文标题"},
                success : function(json) {
                    console.log("getJSON1 =>", json);
                    $("output2").innerText = this.$request.url + "\n\n" + this.responseText;
                    console.log(json, this);
                },
                error : function(method, url) {
                    console.error("getJSON Error =>", method, url);
                }
            });

            httpx.getJSON({
                url : "http://localhost/httpx.js/examples/php/get-json3.php?temp="+(new Date).getTime(),
                data : {test : 123},
                success : function(json) {
                    console.log("getJSON2 =>", json);
                    $("output3").innerText = this.$request.url + "\n\n" + this.responseText;
                    console.log(json, this);
                },
                error : function(method, url) {
                    var error = "GET JSON Error : " + " " + url + " " + this.status + " " + this.statusText;
                    console.error(error);
                    $("output3").innerText = error;
                }
            });

            // Cross domain
            httpx.getJSON("http://api.httpxjs.com/", {
                test : 123,
                id : 4543,
                name : 'ajax',
                bar : 'far'
            }, function (result) {
                $("output4").innerHTML = 'Cross domain getJSON => ' + JSON.stringify(result);
            });
        </script>
    </body>
</html>
